@charset "utf-8";
*,:after,:before{box-sizing:border-box;-webkit-overflow-scrolling:touch;}html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,img,hr{margin:0;padding:0;vertical-align:baseline}fieldset,img{border:0;}address,caption,cite,code,dfn,em,th,td,var,i{font-style:normal;font-weight:normal;}ol,ul,li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,legend{color:#000;}button{background:none;border:none;outline:none;}
body{font-family: PingFang SC,Lantinghei SC,Microsoft Yahei,Hiragino Sans GB,Microsoft Sans Serif,WenQuanYi Micro Hei,sans-serif;}
//body{position:relative;background:#fff;font-family:Segoe UI,Lucida Grande,Helvetica,Arial,Microsoft YaHei,FreeSans,Arimo,Droid Sans,wenquanyi micro hei,Hiragino Sans GB,Hiragino Sans GB W3,FontAwesome,sans-serif;font-weight:400;color:#333;}
html,body{background-color: #f0f0f0;height: 100%;font-size: .18rem;}
.clearfix:after{clear:both;content:".";display:block;height:0;visibility:hidden}

a{text-decoration: none;color: #666;}

@font-face {
  font-family: 'iconfont';  /* project id 262663 */
  src: url('http://at.alicdn.com/t/font_o48hzla9393yds4i.eot');
  src: url('http://at.alicdn.com/t/font_o48hzla9393yds4i.eot?#iefix') format('embedded-opentype'),
  url('http://at.alicdn.com/t/font_o48hzla9393yds4i.woff') format('woff'),
  url('http://at.alicdn.com/t/font_o48hzla9393yds4i.ttf') format('truetype'),
  url('http://at.alicdn.com/t/font_o48hzla9393yds4i.svg#iconfont') format('svg');
}

@function px2rem($px){
    @return $px / 100px * 1rem;
}

.iconfont {
  font-family:"iconfont" !important;
  font-size: .24rem;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  vertical-align: middle;
}
.playheight{width: 100%;height: 100%;}
.ikf-{
    &blank{height: .6rem}
    &player{width: 100%;height: 3.62rem;background-color: #000;}
    &nav{height: .6rem;background-color: #f56a00;color: #fff;position: fixed;top: 0;left: 0;right: 0;z-index:2147483649;
        .back{position: absolute;top: .16rem;left: .2rem;}
        .menu,.search,.home{float: right;margin-top: .16rem;margin-right: .2rem;
            a{color: #fff;}
        }
        .home{margin-top: .12rem;
            a{
                i{font-size: .3rem;}
            }
        }
    }
    &searchPop {position: absolute; top: 0; left: 0; width: 100%; z-index: 2147483650; display: none; background-color: #fff; overflow: hidden;
        input[type="search"] { -webkit-appearance: none; }
        input::-webkit-search-cancel-button { display: none; }
        .searchCon { height: .6rem; background-color:#E35000; width: 100%; position: relative; overflow: hidden;
            .sSearchInput { display: block; padding: .1rem 0 .1rem .15rem; margin-right: 1rem; position: relative;
                .searchInput { border: 0 none; width: 100%;border-radius: 3px;background-color: #fff; height: .4rem; padding: .05rem 0 .05rem .15rem;}
                .iDelete { background-color: #c3c3c3; width: .2rem; height: .2rem; border-radius: 50%; position: absolute; top: 50%;transform: translateY(-50%);right: .12rem; cursor: pointer; display: none;
                    &:before,&:after{ content: ""; transform: rotate(45deg); position: absolute; top: 50%; left: 50%; width: 1px; height: 0.66667rem; background-color: #fff; margin-top: -0.3rem; margin-left: -0.03333rem; }
                    &:before{ -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); }
                }
            }
            .cancelInput { position: absolute; top: 0; right: 0; width: 1rem; height: .6rem; line-height: .6rem; text-align: center; border: 0 none; background: none; color: #fff; font-size: .2rem; cursor: pointer; }
        }
        .pLinks{
            a { display: block; line-height: .6rem; border-bottom: 1px solid #e7e7e7; display: flex; padding: 0 4%;
                span { display: block; color: #333; 
                    &.sName { white-space: nowrap; text-overflow: ellipsis; flex: 1;overflow: hidden; 
                        em { color: #3097fd; }
                    }
                    &.sStyle { opacity: 0.7; padding-left: .15rem; }
                }
            }
        }
    }

    &tool{position: relative;padding: 0 .2rem;height: .6rem;border-bottom: 1px solid #eee;background-color: #fff;line-height: .6rem;color: #666;//box-shadow: 2px 2px 2px rgba(0,0,0,.1);
        i{font-size: .3rem;float: left;line-height: .55rem;
            a{font-size: .24rem;}
        }
        .ikf-{
            &r{float: right;
                i{margin-left: .3rem;
                    &.rss{margin-top: .03rem;}
                    &:first-child{margin-left: 0;}
                }
                .play-icon{float: left;margin-left: .2rem;
                    i{margin-left: 0;}
                }
                .playname{position: absolute;padding: .1rem .2rem;width: 2.8rem;box-shadow: 0 0 10px 2px rgba(0, 0, 0, .2);background-color: #fff;right: .1rem;top: .6rem;z-index: 999;display: none;
                    li{width: 50%;float: left;font-size: .18rem;
                        span{margin-right: .05rem;}
                    }
                }
            }
            &comment{float: left;
                i{margin-top: .02rem;}
                em{margin-left: .1rem;color: #999;}
            }
        }
    }
    &main,&info{position: relative;}
    &position{padding: 0 .2rem;height: .4rem;line-height: .4rem;margin-top: .1rem;background-color: #fff;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
        a{color: #999;}
        span{margin: 0 .1rem;color: #ccc;font-size: .16rem;}
    }
    &title{padding: 0 .2rem;position: relative;height: .6rem;background-color: #fff;line-height: .6rem;z-index: 1;
        &.ddd{border-bottom: 1px solid #ddd;overflow: hidden;}
        h2{font-size: .24rem;}
            div{float: right;margin-right: -.05rem;
            span{color: #999;
                i{float: right;margin-top: .05rem;}
            }
            label{position: relative;top: -.02rem;margin: 0 .1rem;color: #ccc;font-size: .14rem;}
        }
        em{position: absolute;left: 0;top: 0;width: .1rem;height: .1rem;background-color: #f56a00;border-bottom-right-radius: .1rem;z-index: 2;}
    }
    &des{background-color: #fff;padding-bottom: .05rem;
        span{float: right;font-size: .2rem;
            i{display: inline-block;}
        }
        h1{font-size: .24rem;color: #333;}
        .intro{padding: 0 .2rem .1rem;color: #999;background-color: #fff;}
    }
    &info{position: absolute;top: 0;left: 0;right: 0;bottom: 0;height:100%;background-color: #fff;z-index: 2147483648;display: none;overflow: hidden;padding-bottom: .2rem;
        .ikf-title{border-bottom: 1px solid #eee;
            i{float: right;}
        }
        .infobox{padding: .2rem;height: calc(100% - .4rem);overflow-y: auto;}
        .con{font-size: .2rem;
            li{float: left;width: 50%;line-height: .42rem;
                &.lang{width: 100%;}
                &.content{padding-top: .1rem;line-height: .32rem;}
            }
        }
    }
    &playlist{width: 100%;max-height: 5rem;background-color: #fff;overflow-x: hidden;overflow-y: auto;border-bottom: 1px solid #eee;
        ul{position: relative;overflow: hidden;
            li{float: left;padding: 0 .15rem;width: 50%;height: 46px;line-height: 46px;border-bottom: 1px solid #eee;color: #333;
                &.cur{border-bottom-color: #f60;}
                a{color: #666;font-size: 14px;display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
            }
        }
    }
    &actor{width: 100%;overflow-y: hidden;overflow-x: auto;background-color: #fff;border-bottom: 1px solid #eee;
        li{float: left;width: 1.6rem;text-align: center;padding-bottom: .1rem;border-right: 1px solid #fff;
            img{width: 100%;height: 2.16rem;}
        }
    }
    &icon{float: left;background: url(../img/sprite_source@2x.png) -4.8rem -.4rem no-repeat;width: .4rem;height: .4rem;background-size: 5.6rem .8rem;margin-top: .09rem;
        &.qq{background-position: 0 0;}
        &.youku,&.yuku{background-position: -.4rem 0}
        &.tudou{background-position: -2*.4rem 0}
        &.iqiyi,&.qiyi{background-position: -2*.6rem 0}
        &.pptv{background-position: -2*.8rem 0}
        // &.sina{background-position:px2rem(-2*100px) 0}
        // &.pps{background-position:px2rem(-2*120px) 0}
        &.letv,&.letvyun{background-position: -2*1.4rem 0}
        // &.ku6{background-position:px2rem(-2*160px) 0}
        // &.56{background-position:-180px 0}
        // &.baomihua{background-position:px2rem(-2*200px) 0}
        // &.fengxing{background-position:px2rem(-2*220px) 0}
        // &.kumi{background-position:px2rem(-2*240px) 0}
        // &.kankan{background-position:0 px2rem(-2*20px)}
        &.sohu{background-position: -2*.2rem -2*.2rem}
        // &.ifeng{background-position:px2rem(-2*40px) px2rem(-2*20px)}
        // &.cntv{background-position:px2rem(-2*60px) px2rem(-2*20px)}
        // &.m1905{background-position:px2rem(-2*80px) px2rem(-2*20px)}
        // &.wasu{background-position:px2rem(-2*100px) px2rem(-2*20px)}
        // &.baofeng{background-position:px2rem(-2*140px) px2rem(-2*20px)}
        // &.mgtv{background-position:px2rem(-2*160px) px2rem(-2*20px)}
        &.bilibili{background-position: -2*1.8rem -2*.2rem}
        &.acfun{background-position:-2*2rem -2*.2rem}
        // &.tangdou{background-position:px2rem(-2*220px) px2rem(-2*20px)}
        // &.dilidili{background-position:px2rem(-2*260px) 0}
    }
    /* 预告+mtv+op */
    &yugao{background-color: #fff;
        li{border-bottom: 1px solid #f3f3f3;height: .48rem;line-height: .48rem;
            &.top{background-color: #f5f5f5;}
            span{float: left;color: #999;height: .4rem;text-align: center;
                &.time{width: .8rem;}
                &.name{width: 3.3rem;text-align: left;
                    a{float: left;color: #37a;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 2.3rem;
                        &:hover{color: #f60;}
                    }
                    em{margin-left: 10px;}
                }
                &.clarity{width: 1rem;}
                &.play{width: .7rem;
                    em{display: inline-block;padding: 0 10px;height: 24px;line-height: 24px;border-radius: 3px;background-color: #4d9cec; color:#fff;}
                    &:hover{
                        em{background-color: #1c81e7;border-color: #1c81e7;}
                    }
                }
                &.source{width: .6rem;padding-right: .1rem;text-align:right;
                    i{margin-top: .05rem;margin-right: 0;float: none;display: inline-block;}
                }
            }
            &:hover{background-color: #f5f5f5;border-bottom-color: #ddd;}
        }
    }
    &item{width: 100%;overflow-y: hidden;overflow-x: auto;border-bottom: 1px solid #eee;background-color: #fff;
        a{position: relative;float: left;width: 2.13334rem;padding-bottom: .1rem;border-right: 1px solid #fff;
            img{display: block;width: 100%;height: 3rem;}
            em{position: absolute;right: 0;top: 0;padding: 0 .1rem;background-color: rgba(255,125,0,.7);color: #fff;}
            h3{padding: 0 .05rem;height: .4rem;line-height: .4rem;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;color: #333;}
            p{padding: 0 .05rem;}
        }
    }
    &news{width: 100%;border-bottom: 1px solid #eee;background-color: #fff;
        li{float: left;width: 2.13334rem;padding-bottom: .1rem;border-right: 1px solid #fff;
            div{position: relative;width: 100%;height: 1.21rem;overflow: hidden;}
            img{display: block;width: 100%;position: absolute;left: 0;top: 50%;transform: translateY(-50%);}
            h2{height: .6rem;line-height: .3rem;overflow: hidden;}
            .cate{position: absolute;right: 0;bottom: 0;padding: 0 .1rem;background-color: #0bbc6b;color: #fff;}
        }
    }
    // &playlisttan{position: absolute;top: 0;left: 0;right: 0;bottom: 0;height: 100%;background-color: #fff;z-index: 2147483648;display: none;
    //     .ikf-title{border-bottom: 1px solid #eee;
    //         i{float: right;}
    //     }
    //     .playbox{overflow-x: hidden;overflow-y: auto;height: calc(100% - .8rem);padding-top: .2rem;
    //         ul{margin: 0 auto;width: 6.03rem!important;height: auto;border-left: 1px solid #eee;border-top: 1px solid #eee;
    //             li{border-bottom: 1px solid #eee;}
    //         }
    //     }
    // }
    &share{position: fixed;padding-bottom: .25rem;left: 0;bottom: 0;right: 0;background-color: #fff;z-index: 2147483648;display: none;
        .bdshare-button-style1-32{width: 5.9rem;margin: 0 auto;
            a{margin-left: .5rem;margin-top: .3rem;}
        }
        span{position: absolute;right: .1rem;top: .1rem;}
    }
    &game{position: relative;margin: .1rem 0;padding: .1rem;height: 1.2rem;background-color: #fff;overflow: hidden;
        img{float: left;margin-right: .1rem;width: 1rem;height: 1rem;border-radius: .2rem;}
        span{position: absolute;right: .1rem;top: .15rem;padding: .1rem .2rem;background-color: #f56a00;color: #fff;border-radius: .05rem;}
        h4,p{white-space: nowrap;overflow:hidden;text-overflow: ellipsis;}
        h4{font-size: .24rem;margin-top: .05rem;color: #333;}
        p{margin-top: .35rem;color: #999;}
    }
    &gamepic{margin: .1rem 0;background-color: #fff;
        img{display: block;width: 100%;}
    }
    &detail{margin-bottom: 1px;background-color:#fff;overflow: hidden;
        .pic{width: 1.6rem;float: left;margin: .1rem;
            img{width: 100%;display: block;}
        }
        .detail{margin-left: 1.9rem;font-size: .22rem;padding-bottom: .1rem;
            h1{font-size: .28rem;font-weight: 400;padding-top: .1rem;margin-bottom: .1rem;}
            p{height: .4rem;line-height: .4rem;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;color: #999;
                em{margin-right: .1rem;
                    &.yellow{color: #f83;}
                }
                a{color: #999;margin-right: .1rem;}
                i{color: #bbb;margin-right: .1rem;}
                &.pTxt{padding-right: .35rem;position: relative;
                    .arrow{position: absolute;right: 0;top: 0;transition: transform .4s;width: .4rem;height: .4rem;text-align: center;
                        i{font-size: .3rem;margin-right: 0;width: .4rem;height: .4rem;}
                        &.active {top: auto;bottom: 0;transform: rotate(180deg);}
                    }
                }
            }
        }

   }
}
.html{height: 3.2rem;line-height: 3.2rem;text-align: center;color: #aaa;font-size: .3rem;
display: block;}